<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="请输入标题/适应人群" size="small" v-model="like1" style="width: 260px;">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <div style="height: 30px;">
          </div>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addMuban">新增</el-button>
        </el-col>
      </el-row>
      <el-row>
          <el-table :data="findOrder().slice((pageNum-1)*pageSize,pageNum*pageSize)" border size="mini" header-cell-class-name="header-row">
            <el-table-column prop="mbid" label="模板编号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="mbtitle" label="模板标题" header-align="center" align="center"></el-table-column>
            <el-table-column prop="mbkey" label="关键字" header-align="center" align="center"></el-table-column>
            <el-table-column prop="mbrenqun" label="适用人群" header-align="center" align="center"></el-table-column>
            <el-table-column prop="fanganmubiao" label="方案目标" header-align="center" align="center"></el-table-column>
            <el-table-column prop="beizhu" label="备注" header-align="center" align="center"></el-table-column>
            <el-table-column label="状态" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-switch
                :value="scope.row.mbstatue"
                active-value="启用"
                inactive-value="禁用"
                active-text="启用"
                inactive-text="禁用"
                @change="Kg(scope.row)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="200px">
              <template slot-scope="scope">
                <el-button type="primary" size="mini"
                  @click="xg(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="pageNum"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="findOrder().length">
          </el-pagination>
          <el-dialog :title="title" :visible.sync="dialogTransferVisible">
            <el-tabs type="border-card">
              <el-tab-pane label="基本信息">
                 <el-form :model="muban" :rules="rules" ref="muban" label-position="right" size="small">
                  <el-form-item label="模板标题" prop="mbtitle">
                    <el-input placeholder="模板标题" size="small" v-model="muban.mbtitle" style="width: 235px;"/>
                  </el-form-item>
                  <el-form-item prop="mbkey" label="关键字">
                    <el-input placeholder="关键字" size="small" v-model="muban.mbkey" style="width: 255px;"/>
                  </el-form-item>
                  <el-form-item prop="mbrenqun" label="适用人群">
                      <el-input placeholder="适用人群" size="small" v-model="muban.mbrenqun" style="width: 235px;"/>
                  </el-form-item>
                  <el-form-item label="方案目标" prop="fanganmubiao">
                    <el-input
                    style="width: 600px;"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入方案目标"
                    v-model="muban.fanganmubiao">
                  </el-input>
                  </el-form-item>

                  <el-form-item label="备注" prop="beizhu">
                    <el-input
                      style="width: 630px;"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入备注"
                      v-model="muban.beizhu">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="饮食干预">
                <el-table
                    ref="multipleTable"
                    :data="yinshiList.slice((pageNum2-1)*pageSize2,pageNum2*pageSize2)"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="编号" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="energy" label="推荐摄入热量(g)" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="name" label="推荐推荐饮食" header-align="center" align="center"></el-table-column>
                </el-table>
                <el-pagination
                    background
                    @size-change="handleSizeChange2"
                    :current-page.sync="pageNum2"
                    :page-sizes="[2,4,6,8]"
                    :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="yinshiList.length">
                </el-pagination>
              </el-tab-pane>
              <el-tab-pane label="运动干预">
                <el-table
                    ref="multipleTable2"
                    :data="yundongList.slice((pageNum3-1)*pageSize3,pageNum3*pageSize3)"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange2">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="编号" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="movementTime" label="推荐时间(分钟)" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="name" label="推荐运动" header-align="center" align="center"></el-table-column>
                </el-table>
                <el-pagination
                    background
                    @size-change="handleSizeChange3"
                    :current-page.sync="pageNum3"
                    :page-sizes="[2,4,6,8]"
                    :page-size="pageSize3"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="yundongList.length">
                </el-pagination>
              </el-tab-pane>
              <el-tab-pane label="健康方案">
                <el-table
                    ref="multipleTable3"
                    :data="jiankangList.slice((pageNum4-1)*pageSize4,pageNum4*pageSize4)"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange3">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="编号" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="title" label="标题" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="keywords" label="关键字" header-align="center" align="center"></el-table-column>
                </el-table>
                <el-pagination
                    background
                    @size-change="handleSizeChange4"
                    :current-page.sync="pageNum4"
                    :page-sizes="[2,4,6,8]"
                    :page-size="pageSize4"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="jiankangList.length">
                </el-pagination>
              </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="qd()">确 定</el-button>
              <el-button @click="qx">取消</el-button>
            </div>
          </el-dialog>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import {getAllMuBan,updateStatue,addMuban,updateMuban,queryYunDong,queryJianKang,queryYinShi} from '@/api/xsxmuban'
import {getYinShi} from '@/api/xsxmeals'
import {getYunDong} from '@/api/xsxsportsitemlibrary'
import {getJianKang} from '@/api/xsxhealthplan'

export default {
  data() {
      return {
        checked:true,
        activeName:'second',
        multipleSelection: [],
        arr:[],
        multipleSelection2: [],
        arr2:[],
        multipleSelection3: [],
        arr3:[],
        yinshiList:[],
        yundongList:[],
        jiankangList:[],
        title:"添加模板",
        mubanList:[],
        muban:{
          mbid:0,
          mbtitle:"",
          mbkey:"",
          mbrenqun:"",
          fanganmubiao:"",
          beizhu:"",
          mbstatue:"启用"
        },
        dialogTransferVisible:false,
        loading: false,
        like1:'',
        pageSize:4,//每页显示的条数
        pageNum:1,
        pageSize2:6,//每页显示的条数
        pageNum2:1,
        pageSize3:6,//每页显示的条数
        pageNum3:1,
        pageSize4:6,//每页显示的条数
        pageNum4:1,
        rules: {
          mbtitle: [
            { required: true, message: '请输入模板标题', trigger: 'blur' },
            { min: 2, message: '长度在 2 个字符以上', trigger: 'blur' }
          ],
          mbkey: [
            {required: true, message: '请输入关键字', trigger: 'blur' }
          ],
          mbrenqun: [
            {required: true, message: '请选择适用人群', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '请输入适用年龄', trigger: 'blur' }
          ],
          fanganmubiao: [
            { required: true, message: '请输入方案目标', trigger: 'blur' }
          ],
          beizhu: [
            { required: true, message: '请输入备注', trigger: 'blur' }
          ]
        },
      };
  },
  methods: {
    qx(){
      this.dialogTransferVisible=false;
      this.pageInit()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
     handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
     handleSelectionChange3(val) {
      this.multipleSelection3 = val;
    },
    Kg(row){
       this.$confirm('是否确定继续此操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(row.mbstatue=='启用'){
            updateStatue(0,row.mbid).then(response => {
              if(response.data>0){
                this.pageInit()
              }
            })
          }else{
            updateStatue(1,row.mbid).then(response => {
              if(response.data>0){
                this.pageInit()
              }
            })
          }
          this.$message({
              type: 'success',
              message: '操作成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
    },
    addMuban(){
      this.title="添加模板";
      this.dialogTransferVisible=true;
    },
    handleSizeChange(val) {
     this.pageSize = val;
    },
    handleSizeChange2(val) {
     this.pageSize2 = val;
    },
    handleSizeChange3(val) {
     this.pageSize3 = val;
    },
    handleSizeChange4(val) {
     this.pageSize4 = val;
    },
    async pageInit() {
      try {
        let [mb,ys,yd,jk] = await Promise.all([
          getAllMuBan(),
          getYinShi(),
          getYunDong(),
          getJianKang()
        ])
        this.mubanList=mb.data
        this.yinshiList=ys.data
        this.yundongList=yd.data
        this.jiankangList=jk.data
      } catch(error) {
        this.outputError(error)
      }
    },
    findOrder(){
        return this.mubanList.filter((item,i)=>{
            if(item.mbtitle.includes(this.like1) || item.mbrenqun.includes(this.like1)){
                return item;
            }
        })
    },
    xg(row){
      this.muban=row
      this.title="编辑模板";
      let f=confirm("你确定进行此操作吗？");
      if(!f){
        return false;
      }
      queryYinShi(row.mbid).then(response => {
         this.$nextTick(function () {
          let that=this
          that.$refs.multipleTable.clearSelection()
            for(let i=0;i<that.yinshiList.length;i++){
              for(let j=0;j<response.data.length;j++){
                if(that.yinshiList[i].id==response.data[j].yinshiId){
                  that.$refs.multipleTable.toggleRowSelection(that.yinshiList[i],true)
                }
              }
            }
        })
      })

      queryYunDong(row.mbid).then(response => {
         this.$nextTick(function () {
          let that=this
          that.$refs.multipleTable2.clearSelection()
            for(let i=0;i<that.yundongList.length;i++){
              for(let j=0;j<response.data.length;j++){
                if(that.yundongList[i].id==response.data[j].yundongId){
                  that.$refs.multipleTable2.toggleRowSelection(that.yundongList[i],true)
                }
              }
            }
        })
      })

      queryJianKang(row.mbid).then(response => {
         this.$nextTick(function () {
          let that=this
          that.$refs.multipleTable3.clearSelection()
            for(let i=0;i<that.jiankangList.length;i++){
              for(let j=0;j<response.data.length;j++){
                if(that.jiankangList[i].id==response.data[j].jiankangId){
                  that.$refs.multipleTable3.toggleRowSelection(that.jiankangList[i],true)
                }
              }
            }
        })
      })

      this.dialogTransferVisible=true;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    qd(){
      if(this.multipleSelection.length==0){
        alert("请选择饮食干预")
        return;
      }
      if(this.multipleSelection2.length==0){
        alert("请选择运动干预")
        return;
      }
       if(this.multipleSelection3.length==0){
        alert("请选择健康方案")
        return;
      }
      for(let i=0;i<this.multipleSelection.length;i++){
        this.arr.push(this.multipleSelection[i].id)
      }
      for(let i=0;i<this.multipleSelection2.length;i++){
        this.arr2.push(this.multipleSelection2[i].id)
      }
      for(let i=0;i<this.multipleSelection3.length;i++){
        this.arr3.push(this.multipleSelection3[i].id)
      }
     if(this.title=="添加模板"){
      addMuban(JSON.stringify(this.muban),JSON.stringify(this.arr),JSON.stringify(this.arr2),JSON.stringify(this.arr3)).then(response => {
        if(response.data>0){
          this.pageInit()
        }
      })
     }
     if(this.title=="编辑模板"){
       console.log(this.muban)
       console.log(this.arr)
       console.log(this.arr2)
       console.log(this.arr3)
        updateMuban(JSON.stringify(this.muban),JSON.stringify(this.arr),JSON.stringify(this.arr2),JSON.stringify(this.arr3)).then(response => {
          if(response.data>0){
            this.pageInit()
          }
        })
     }
      this.dialogTransferVisible=false;
    },
  },
  created() {
    this.pageInit()
  }
}
</script>
